<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style>
    a.btn-bg {
        border:0;
        color:#fff;
        padding:3px 8px;
    }
</style>
<div class="mini-toolbar" style="margin-bottom: 5px;">
    <a id="add" class="mini-button" iconCls="icon-user-add">增加</a>
    <a id="edit" class="mini-button" iconCls="icon-user-edit">编辑</a>
    <a id="remove" class="mini-button" iconCls="icon-user-delete">删除</a>
    <span class="separator"></span>
    <a class="btn-default btn_see"><i class="fa fa-mobile" style="margin-top: -2px;font-size: 1.5em"></i>发短信</a>
    <a class="btn-default btn_see"><i class="fa fa-envelope-o" style="margin-top: -4px"></i>发送邮件</a>
    <a class="btn-default btn_see"><i class="fa fa-bookmark-o" style="margin-top: -2px"></i>发送模板消息</a>
    <a class="btn-default btn_see"><i class="fa fa-key" style="margin-top: -2px"></i>修改密码</a>
    <span class="separator"></span>
    <a id="ec_btn" class="btn-default btn_see"><i class="fa fa-download"></i>导出会员</a>
    <div class="fr">
        条件 <input id="tj" class="mini-combobox w80" showNullItem="true" emptyText="选择条件" valueField="val"
                  textField="name" url="${ctx}/dict/code?id=YHTJ&_refresh"/>
        <input id="key" class="mini-textbox w200" emptyText="请输入搜索关键词"/>
        <a id="search" class="mini-button" iconCls="icon-search" style="margin-right:0;">查询</a>
    </div>
</div>
<div id="memberGrid" class="mini-datagrid" multiSelect="true"
     url="${ctx}/member/page" idField="id" pageSize="10"
>
    <div property="columns">
        <div type="checkcolumn" width="10"></div>
        <div field="avatar" width="15" renderer="r.renderAvatar">头像</div>
        <div field="account" width="40">账号</div>
        <div field="nickname" width="40">昵称</div>
        <div field="sex" width="15" renderer="r.renderSex">性别</div>
        <div field="type" width="20">类型</div>
        <div field="isLock" width="20" renderer="r.renderIsLock">状态</div>
        <div field="tel" width="30">电话</div>
        <div field="email" width="50">邮箱</div>
        <div field="birthday" width="30">生日</div>
        <div field="openId" width="70">微信ID</div>
        <div field="action" width="30">操作</div>
    </div>
</div>
<script type="text/javascript">
    var init = function() {
        mini.parse();
        var grid = app.initTablePlugin({
            id: 'member',
            name: '会员',
            addCls: 'icon-user-add',
            editCls: 'icon-user-edit',
            params: {sortField: "id", sortOrder: "desc"},
            addApi: '${ctx}/member/save',
            findApi: '${ctx}/member/find',
            removeApi: '${ctx}/member/delete',
            updateApi: '${ctx}/member/update',
            showAddEvent: function (win, frm) {
                $("img.user_tx").attr("src", "${ctx}/upload/tx.png");
            },
            showEditEvent: function (win, frm, res) {
                $("img.user_tx").attr("src", "${ctx}/" + res.data.avatar);
            },
            onSearchEvent: function () {
                var tjKey = mini.get("tj").getValue();
                var keyVal = mini.get("key").getValue();
                var type = mini.get("type").getValue();
                if (tjKey == "" && keyVal == "" && type == "") return {};
                return {filters: '{userType:"' + type + '"}', tjKey: tjKey, keyValue: keyVal};
            }
        });
    }

    var r = {
        renderAvatar: function (e) {
            return '<img src= "${ctx}' + e.value + '" onerror="" class="avatar xz fl" />';
        },
        renderSex: function (e) {
            if (e.value == 0)
                return '<i class="mini-iconfont table-icon icon-female"></i>';
            else if (e.value == 1)
                return '<i class="mini-iconfont table-icon icon-male"></i>';
        },
        renderTime: function (e) {
            var rec = e.record;
            return `<a class="btn-default btn_edit" xtype="3" data-placement="left" create-time="` + rec.createTime + `"
            update-time="` + rec.updateTime + `"
             create-by="` + rec.createBy + `"
              update-by="` + rec.updateBy + `"><i class="sc_icon sc_icon_see"></i>查看信息</a>`;
        },
        renderIsLock: function (e) {
            var rec = e.record;
            if (e.value == 0) {
                return `<div class="switch active" onclick="OnSwitch('` + rec.id + `', 1, this);">
                                            	<div class="circle"></div>
                                            </div>`;
            } else if (e.value == 1) {
                return `<div class="switch " onclick="OnSwitch('` + rec.id + `', 0, this);">
                                            	<div class="circle"></div>
                                            </div>`;
            }
        }
    }
</script>
